<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-header">
        <h1>DeepSeek Chat</h1>
        <p class="subtitle">欢迎回来，请登录您的账号</p>
      </div>
      
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label>用户名</label>
          <div class="input-wrapper">
            <span class="icon">👤</span>
            <input 
              type="text" 
              v-model="username" 
              placeholder="请输入用户名"
              required
            >
          </div>
        </div>
        
        <div class="form-group">
          <label>密码</label>
          <div class="input-wrapper">
            <span class="icon">🔒</span>
            <input 
              :type="showPassword ? 'text' : 'password'"
              v-model="password" 
              placeholder="请输入密码"
              required
            >
            <span 
              class="icon clickable" 
              @click="showPassword = !showPassword"
            >
              {{ showPassword ? '👁️' : '👁️‍🗨️' }}
            </span>
          </div>
        </div>

        <!-- 滑块验证码 -->
        <div class="form-group">
          <label>滑动验证</label>
          <div class="slider-container" 
               :class="{ 'verified': isVerified }"
               @mousedown="startSlide"
               @mousemove="moveSlide"
               @mouseup="endSlide"
               @mouseleave="endSlide">
            <div class="slider-track">
              {{ isVerified ? '验证通过' : '请按住滑块，拖动到最右边' }}
            </div>
            <div class="slider-button" 
                 :style="{ left: sliderLeft + 'px' }"
                 ref="sliderButton">
              ➡️
            </div>
          </div>
        </div>

        <div class="form-footer">
          <label class="remember-me">
            <input type="checkbox" v-model="remember">
            <span>记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>
        
        <button type="submit" :disabled="loading || !isVerified" class="login-button">
          <span v-if="!loading">登 录</span>
          <span v-else class="loading-dots">
            <span>.</span><span>.</span><span>.</span>
          </span>
        </button>
      </form>

      <div class="register-hint">
        还没有账号？ <a href="#" @click.prevent="goToRegister" class="register-link">立即注册</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();
const username = ref('user');
const password = ref('123123');
const loading = ref(false);
const remember = ref(false);
const showPassword = ref(false);

// 滑块验证相关
const isVerified = ref(false);
const sliderLeft = ref(0);
const isDragging = ref(false);
const startX = ref(0);
const sliderButton = ref(null);
const sliderWidth = ref(0);

const startSlide = (e) => {
  if (isVerified.value) return;
  isDragging.value = true;
  startX.value = e.clientX - sliderLeft.value;
  // 获取滑块容器宽度
  const container = e.currentTarget;
  sliderWidth.value = container.offsetWidth - 40; // 40是滑块按钮的宽度
};

const moveSlide = (e) => {
  if (!isDragging.value) return;
  
  let newLeft = e.clientX - startX.value;
  // 限制滑块在容器内
  newLeft = Math.max(0, Math.min(newLeft, sliderWidth.value));
  sliderLeft.value = newLeft;

  // 判断是否滑到末端
  if (newLeft >= sliderWidth.value) {
    isVerified.value = true;
    isDragging.value = false;
  }
};

const endSlide = () => {
  if (!isDragging.value) return;
  isDragging.value = false;
  
  // 如果没有验证成功，滑块返回起点
  if (!isVerified.value) {
    sliderLeft.value = 0;
  }
};

const handleLogin = async () => {
  if (!isVerified.value) {
    alert('请完成滑块验证');
    return;
  }

  try {
    loading.value = true;
    
    // 模拟登录成功
    if (username.value === 'user' && password.value === '123123') {
      localStorage.setItem('token', 'mock-token-123');
      await router.push('/chat');
    } else {
      alert('用户名或密码错误');
    }
    
    /* 后端ready后可以改用这段代码
    const response = await axios.post('http://localhost:8080/api/auth/login', {
      username: username.value,
      password: password.value,
      remember: remember.value
    });
    
    if (response.data.token) {
      localStorage.setItem('token', response.data.token);
      await router.push('/chat');
    }
    */
    
  } catch (error) {
    console.error('登录失败:', error);
    alert('登录失败，请检查用户名和密码');
  } finally {
    loading.value = false;
  }
};

const goToRegister = () => {
  router.push('/register');
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%),
    linear-gradient(to right, #2c3e50, #3498db);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  padding: 20px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-container {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 40px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header h1 {
  margin: 0;
  color: #1a1a1a;
  font-size: 28px;
  font-weight: 600;
}

.subtitle {
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.icon {
  padding: 0 12px;
  color: #666;
  user-select: none;
}

.clickable {
  cursor: pointer;
}

input {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
}

input::placeholder {
  color: #999;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.forgot-password {
  font-size: 14px;
  color: #007AFF;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-button {
  width: 100%;
  padding: 14px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-button:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.login-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.loading-dots span {
  animation: loading 1.4s infinite;
  opacity: 0;
}

.loading-dots span:nth-child(2) {
  animation-delay: .2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes loading {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.register-hint {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.register-link {
  color: #007AFF;
  text-decoration: none;
  font-weight: 500;
}

.register-link:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .login-container {
    padding: 30px 20px;
  }
}

/* 滑块验证码样式 */
.slider-container {
  position: relative;
  height: 40px;
  background: #f5f7fa;
  border-radius: 20px;
  user-select: none;
  touch-action: none;
}

.slider-track {
  height: 100%;
  line-height: 40px;
  text-align: center;
  color: #999;
  font-size: 14px;
  transition: color 0.3s;
}

.slider-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.slider-button:hover {
  transform: scale(1.05);
}

.slider-container.verified {
  background: #e8f5e9;
}

.slider-container.verified .slider-track {
  color: #4caf50;
}

.slider-container.verified .slider-button {
  background: #4caf50;
  color: white;
}
</style> 